<template>
  <div class="dashboard">
    <!-- 图片区 -->
    <div class="top">
      <div class="left">
        <div class="bar">
          <img
            class="barimg"
            src="http://www-wms-java.itheima.net/img/dashboard-bar-left@2x.5afd2949.png"
            alt=""
          />
          <img
            class="img"
            src="http://www-wms-java.itheima.net/img/dashboard-bar-right@2x.28195570.png"
            alt=""
          />
          <img
            class="avator"
            src="http://www-wms-java.itheima.net/img/avatar@2x.4f4a758f.png"
            alt=""
          />
          <p class="manager">仓储管理员</p>
          <p class="imgtitle">我不是为了输赢，我就是认真！</p>
          <p class="people">—— 罗永浩</p>
          <div class="beijing">
            <p class="title">北京总仓</p>
          </div>
        </div>

        <div class="daiban">
          <div class="info">待办信息</div>
          <el-row>
            <el-col @click.native="$router.push('/ruku/rukuorder')" :span="8" style="padding-left: 15px; padding-right: 15px"
              ><div class="daiban-item">
                <div class="icon"><i class="icon-rukudan iconfont"></i></div>
                <div class="title">入库单</div>
                <div class="add">
                  <span class="lable">新增</span>
                  <span class="value">{{daibanlist[0].value1}}</span>
                  <span class="lable">待审核</span>
                  <span class="value" style="color: rgb(0, 118, 255)"
                    >{{daibanlist[0].value2}}</span
                  >
                </div>
              </div>
            </el-col>
            <el-col @click.native="$router.push('/chuku/chukuorder')" :span="8" style="padding-left: 15px; padding-right: 15px"
              ><div class="daiban-item">
                <div class="icon" style="background: rgb(255, 178, 0)">
                  <i class="icon-chukudan iconfont"></i>
                </div>
                <div class="title">出库单</div>
                <div class="add">
                  <span class="lable">新增</span>
                  <span class="value">{{daibanlist[1].value1}}</span>
                  <span class="lable">待审核</span>
                  <span class="value" style="color: rgb(255, 178, 0)"
                    >{{daibanlist[1].value2}}</span
                  >
                </div>
              </div>
            </el-col>
            <el-col @click.native="$router.push('/kunei/order')" :span="8" style="padding-left: 15px; padding-right: 15px"
              ><div class="daiban-item">
                <div class="icon" style="background: rgb(255, 113, 0)">
                  <i class="icon-navicon-kcpdd iconfont"></i>
                </div>
                <div class="title">盘点单</div>
                <div class="add">
                  <span class="lable">新增</span>
                  <span class="value">{{daibanlist[2].value1}}</span>
                  <span class="lable">待审核</span>
                  <span class="value" style="color: rgb(255, 113, 0)"
                    >{{daibanlist[2].value2}}</span
                  >
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 右侧榜单通知 -->
      <div class="right">
        <div class="notes">
          <div class="info">通知/公告</div>
          <div class="item">
            <div></div>
            <div class="title">好多不会</div>
            <div class="time">2020.12.30 18:23:14</div>
          </div>
          <div class="item">
            <div class="hr"></div>
            <div class="title">好多不会</div>
            <div class="time">2020.12.30 18:23:14</div>
          </div>
          <div class="item">
            <div class="hr"></div>
            <div class="title">好多不会</div>
            <div class="time">2020.12.30 18:23:14</div>
          </div>
          <div class="item">
            <div class="hr"></div>
            <div class="title">好多不会</div>
            <div class="time">2020.12.30 18:23:14</div>
          </div>
          <div class="item">
            <div class="hr"></div>
            <div class="title">好多不会</div>
            <div class="time">2020.12.30 18:23:14</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 任务导航部分 -->
    <div class="tasks">
      <div class="info">任务导航</div>
      <el-row>
        <el-col @click.native="$router.push('/ruku/shouhuotask')" :span="5" style="padding-left: 15px; padding-right: 15px"
          ><div class="tasks-item">
            <div class="icon" style="background: rgb(0, 108, 245)">
              <i class="icon-daishouhuo iconfont"></i>
            </div>
            <div class="title">收货任务</div>
          </div>
        </el-col>
        <el-col @click.native="$router.push('/ruku/shangjia')" :span="5" style="padding-left: 15px; padding-right: 15px"
          ><div class="tasks-item">
            <div class="icon" style="background: rgb(82, 210, 233)">
              <i class="icon-shangjia iconfont"></i>
            </div>
            <div class="title">上架任务</div>
          </div>
        </el-col>
        <el-col @click.native="$router.push('/kunei/task')" :span="5" style="padding-left: 15px; padding-right: 15px"
          ><div class="tasks-item">
            <div class="icon" style="background: rgb(255, 108, 0)">
              <i class="icon-shiwupandian iconfont"></i>
            </div>
            <div class="title">盘点任务</div>
          </div>
        </el-col>
        <el-col @click.native="$router.push('/chuku/jianhuo')" :span="5" style="padding-left: 15px; padding-right: 15px"
          ><div class="tasks-item">
            <div class="icon" style="background: rgb(255, 96, 158)">
              <i class="icon-jianhuo iconfont"></i>
            </div>
            <div class="title">拣货任务</div>
          </div>
        </el-col>
        <el-col @click.native="$router.push('/chuku/jiaojie')" :span="5" style="padding-left: 15px; padding-right: 15px"
          ><div class="tasks-item">
            <div class="icon" style="background: rgb(255, 178, 0)">
              <i class="icon-a-hezuowoshoujiaoliu-01 iconfont"></i>
            </div>
            <div class="title">交接任务</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 出入库图 -->
    <div class="echarts">
      <div class="top-title">
        <div class="info">入库/出库信息</div>
        <div class="check">
          <el-radio-group v-model="radio" @input="inputFn">
            <el-radio-button label="本周"></el-radio-button>
            <el-radio-button label="本月"></el-radio-button>
            <el-radio-button label="本年"></el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <!-- 图表 -->
      <div class="chart"></div>
    </div>
    <!-- 库存 -->
    <div class="kucun">
      <div class="kucuncharts">
        <div class="header">
          <p class="info">库存使用情况</p>
        </div>
        <div class="chart-fotter"></div>
      </div>
      <div class="kuqucharts">
        <div class="header">
          <p class="info">库区使用情况</p>
        </div>
        <div class="chart3"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { daiban, churuku, kucun, kuqu } from '@/api/base'
export default {
  data () {
    return {
      radio: '本周',
      dimension: 'w',
      daibanlist: [] // 待办信息
    }
  },
  created () {
  },
  mounted () {
    this.daiban()
  },
  methods: {
    // 待办信息
    async daiban () {
      const res1 = await daiban()
      this.daibanlist = res1.data
      this.$nextTick(() => {
        this.echarts()
        this.kucun()
        this.kuqu()
      })
    },
    // 周 月 年 选项  表格
    inputFn (val) {
      if (val === '本周') {
        this.dimension = 'w'
      } else if (val === '本月') {
        this.dimension = 'm'
      } else if (val === '本年') {
        this.dimension = 'y'
      }
      this.echarts()
    },
    async echarts () {
      // 入库出库信息
      const res = await churuku({ dimension: this.dimension })
      // console.log(res)
      const { data, x } = res.data
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.querySelector('.chart'))
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          add: '5px',
          left: 'center'
        },
        grid: {
          left: '5%',
          right: '6%',
          add: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: x
        },
        yAxis: {
          type: 'value',
          data: []
        },
        series: [
          {
            data: data[0].data,
            type: 'bar',
            name: data[0].name,
            color: '#ff7100',
            barGap: 0,
            barWidth: '40%'
          },
          {
            data: data[1].data,
            type: 'bar',
            name: data[1].name,
            color: '#ffb200',
            barGap: 0,
            barWidth: '40%'
          }
        ]
      })
    },
    // 库存使用情况
    async kucun () {
      const res = await kucun()
      const myChart = echarts.init(document.querySelector('.chart-fotter'))
      myChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20'

              }
            },
            data: res.data,
            itemStyle: {
              normal: {
                color: function (colors) {
                  const colorList = [
                    '#e4dbda',
                    '#ffaa00'
                  ]
                  return colorList[colors.dataIndex]
                }
              }
            }
          }
        ]
      })
    },
    // 库区使用情况
    async kuqu () {
      await kuqu()
      const myChart = echarts.init(document.querySelector('.chart3'))
      myChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: '170',
          top: '45%'
        },
        series: [
          {
            type: 'pie',
            radius: '70%',
            left: '-280',
            data: [
              { value: 348, name: '拣货区' },
              { value: 487, name: '出库区' },
              { value: 677, name: '暂存区' },
              { value: 126, name: '进货暂存区' },
              { value: 298, name: '出货暂存区' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.6)'
              }
            }
          }
        ]
      })
    }

  }
}
</script>
<style lang="less" scoped>
.dashboard {
  * {
    box-sizing: border-box;
  }
  .top {
    display: flex;
    .left {
      width: calc(100% - 261px);
      padding-right: 30px;
      .bar {
        position: relative;
        width: 100%;
        height: 148px;
        background: linear-gradient(270deg, #ffc771, #ffa634);
        box-shadow: 0 0 6px 0 rgb(188 151 69 / 12%);
        border-radius: 12px;
        .barimg {
          position: absolute;
          top: 0;
          left: 0;
          height: 148px;
        }
        .img {
          position: absolute;
          top: 0;
          right: 0;
          height: 148px;
        }
        .avator {
          position: absolute;
          top: 31px;
          left: 43px;
          height: 62px;
        }
        p {
          padding: 0;
          margin: 0;
        }
        .manager {
          position: absolute;
          left: 36px;
          add: 20px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #332929;
          line-height: 22px;
        }
        .imgtitle {
          position: absolute;
          top: 36px;
          left: 200px;
          font-size: 18px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #fff;
          line-height: 25px;
        }
        .people {
          position: absolute;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #fff;
          line-height: 25px;
          top: 76px;
          left: 400px;
          font-size: 16px;
        }
        .beijing {
          position: absolute;
          top: 20px;
          right: 20px;
          width: 147px;
          height: 40px;
          background: #f8f5f5;
          border-radius: 6px;
          opacity: 0.79;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-around;
          .title {
            font-size: 14px;
            font-weight: 500;
            color: #332929;
            line-height: 20px;
          }
        }
      }
      .daiban {
        margin-top: 20px;
        // width: ;
        height: 282px;
        background: #fff;
        box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
        border-radius: 12px;
        padding: 25px;
        .info {
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #332929;
          line-height: 22px;
        }
        .el-row {
          margin-top: 19px;
          .daiban-item:hover {
            background-color: #fff;
            box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
          }
          .daiban-item {
            position: relative;
            height: 186px;
            background: #fbf7f7;
            border-radius: 8px;
            padding: 20px;
            cursor: pointer;
            .icon {
              width: 49px;
              height: 49px;
              background: #0076ff;
              border-radius: 12px;
              display: flex;
              align-items: center;
              justify-content: space-around;
              .iconfont {
                font-size: 32px;
                color: #f8f5f5;
              }
            }
            .title {
              position: absolute;
              top: 34px;
              left: 85px;
              font-size: 16px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #332929;
              line-height: 22px;
            }
            .add {
              position: absolute;
              add: 20px;
              .lable {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #887e7e;
                margin-right: 10px;
                vertical-align: super;
              }
              .value {
                font-size: 36px;
                font-family: DIN-Medium, DIN;
                font-weight: 500;
                color: #332929;
                margin-right: 20px;
              }
            }
          }
        }
      }
    }
    .right {
      .notes {
        width: 261px;
        height: 451px;
        background: #fff;
        box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
        border-radius: 12px;
        padding: 30px;
        .info {
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #332929;
          line-height: 22px;
        }
        .item {
          margin-top: 15px;
          .hr {
            width: 201px;
            height: 1px;
            background-color: #f5efee;
          }
          .title {
            width: 195px;
            height: 18px;
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #332929;
            line-height: 18px;
            margin-top: 15px;
          }
          .check {
            width: 115px;
            height: 17px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #887e7e;
            line-height: 17px;
            margin-top: 10px;
          }
        }
      }
    }
  }
  .tasks {
    margin-top: 20px;
    width: 100%;
    height: 188px;
    background: #fff;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    border-radius: 12px;
    padding: 25px;
    .info {
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #332929;
      line-height: 22px;
    }
    .el-row {
      margin-top: 19px;
      margin-left: -15px;
      margin-right: -15px;
      .el-col {
        width: 20%;
        padding-left: 15px;
        padding-right: 15px;
      }
      .tasks-item:hover {
        background-color: #fff;
        box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
      }
      .tasks-item {
        position: relative;
        width: 100%;
        height: 93px;
        background: #fbf7f7;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        .icon {
          width: 50px;
          height: 50px;
          border-radius: 25px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          .iconfont {
            font-size: 28px;
            color: #f8f5f5;
          }
        }
        .title {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #332929;
          line-height: 22px;
        }
      }
    }
  }
  .echarts {
    margin-top: 20px;
    height: 500px;
    background: #fff;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    border-radius: 12px;
    padding: 25px;
    .top-title {
      display: flex;
      justify-content: space-between;
      // height: 22px;
      .info {
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #332929;
        line-height: 22px;
      }
      .time {
        /deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
          color: #fff;
          background-color: #ffb200;
          border-color: #ffb200;
          box-shadow: -1px 0 0 0 #ffb200;
        }
      }
    }
    .chart {
      width: 100%;
      height: 430px;
    }
  }
  .kucun {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .kucuncharts {
      width: 30%;
      height: 354px;
      background: #fff;
      box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
      border-radius: 12px;
      padding: 25px;
      margin-right: 30px;
      .header {
        .info {
          padding: 0;
          margin: 0;
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #332929;
          line-height: 22px;
        }
      }
      .chart-fotter {
        height: 280px;
        width: 100%;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        position: relative;
      }
    }
    .kuqucharts {
      width: 70%;
      height: 354px;
      background: #fff;
      box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
      border-radius: 12px;
      padding: 25px;
      .header {
        .info {
          margin: 0;
          padding: 0;
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #332929;
          line-height: 22px;
        }
      }
      .chart3 {
        height: 280px;
        width: 100%;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        position: relative;
      }
    }
  }
}
</style>
